<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>界面原型-用户页面</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, sans-serif;
            line-height: 1.6;
            background: #F5F5F5;
            margin: 0 auto;
            position: relative;
            color: #333;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        .heading {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 16px;
            color: #333;
        }
        .prototype-area {
            display: flex;
            gap: 20px;
        }
        .prototype-column {
            flex: 0 0 840px;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
        }
        .description-column {
            flex: 1;
        }
        .card {
            margin-bottom: 12px;
            background: white;
            border: 1px solid #eee;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
        }
        .card:hover {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            transform: translateY(-2px);
        }
        .card-header {
            background: #FFF0F0;
            padding: 16px;
            border-bottom: 1px solid #FFE4E4;
            font-weight: 600;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #FF9898;
        }
        .card-content {
            padding: 16px;
        }
        .note {
            background: #FFFBE6;
            border: 1px solid #FFE58F;
            padding: 12px;
            border-radius: 4px;
            margin-bottom: 16px;
            color: #D48806;
        }
        .prototype-preview {
            max-width: 414px;
            margin: 0 auto;
            border: 1px solid #FFE4E4;
            box-shadow: 0 4px 16px rgba(255, 152, 152, 0.1);
            background: white;
            border-radius: 16px;
            overflow: hidden;
        }
        .prototype-nav {
            background: linear-gradient(45deg, #FF9898, #FFB6C1);
            color: white;
            padding: 12px 16px;
            text-align: center;
            font-size: 16px;
            font-weight: 600;
            letter-spacing: 1px;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        }
        .prototype-content {
            padding: 16px;
            min-height: 400px;
            position: relative;
            background: #FAFAFA;
            padding-bottom: 56px;
        }
        .tab-bar {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            display: flex;
            justify-content: space-around;
            align-items: center;
            height: 56px;
            background: white;
            border-top: 1px solid #eee;
            box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
        }
        .tab-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 25%;
            height: 100%;
            color: #999;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .tab-item:hover {
            color: #FFB6C1;
        }
        .tab-item.active {
            color: #FF9898;
        }
        .tab-icon {
            font-size: 24px;
            margin-bottom: 2px;
        }
        .tab-text {
            font-size: 12px;
        }
        .requirement {
            margin-bottom: 20px;
            padding: 16px;
            background: #FFF0F0;
            border-radius: 8px;
        }
        .requirement:last-child {
            margin-bottom: 0;
        }
        .requirement-title {
            font-weight: 600;
            color: #FF9898;
            margin-bottom: 8px;
        }
        .requirement-desc {
            color: #666;
            font-size: 14px;
            line-height: 1.6;
        }
        
        /* 用户页面专用样式 */
        .user-profile {
            display: flex;
            align-items: center;
            background: white;
            padding: 16px;
            border-radius: 12px;
            margin-bottom: 16px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }
        .user-avatar {
            width: 64px;
            height: 64px;
            background: linear-gradient(45deg, #FF9898, #FFB6C1);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 24px;
            margin-right: 16px;
            box-shadow: 0 2px 8px rgba(255, 152, 152, 0.3);
        }
        .user-details {
            flex: 1;
        }
        .user-name {
            font-size: 18px;
            font-weight: 500;
            color: #333;
            margin-bottom: 4px;
        }
        .user-bio {
            font-size: 14px;
            color: #666;
        }
        .edit-profile {
            color: #FF9898;
            padding: 6px 12px;
            border: 1px solid #FFE4E4;
            border-radius: 16px;
            font-size: 12px;
            cursor: pointer;
        }
        .stats-section {
            display: flex;
            background: white;
            padding: 12px;
            border-radius: 12px;
            margin-bottom: 16px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }
        .stat-item {
            flex: 1;
            text-align: center;
            border-right: 1px solid #f5f5f5;
        }
        .stat-item:last-child {
            border-right: none;
        }
        .stat-value {
            font-size: 20px;
            font-weight: 500;
            color: #FF9898;
            margin-bottom: 4px;
        }
        .stat-label {
            font-size: 12px;
            color: #666;
        }
        .modules-section {
            background: white;
            border-radius: 12px;
            padding: 16px;
            margin-bottom: 16px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }
        .modules-title {
            font-size: 16px;
            font-weight: 500;
            color: #333;
            margin-bottom: 12px;
        }
        .modules-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
        }
        .module-card {
            background: #f9f9f9;
            border-radius: 12px;
            padding: 12px 8px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .module-card:hover {
            background: #FFF0F0;
            transform: translateY(-2px);
        }
        .module-icon {
            font-size: 24px;
            margin-bottom: 8px;
        }
        .module-title {
            font-size: 12px;
            color: #333;
        }
        .streak-section {
            background: white;
            border-radius: 12px;
            padding: 16px;
            margin-bottom: 16px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }
        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }
        .section-title {
            font-size: 16px;
            font-weight: 500;
            color: #333;
        }
        .section-more {
            font-size: 12px;
            color: #FF9898;
            cursor: pointer;
        }
        .streak-stats {
            display: flex;
            margin-bottom: 16px;
            gap: 16px;
        }
        .streak-stat {
            flex: 1;
            text-align: center;
            background: #f9f9f9;
            padding: 12px;
            border-radius: 8px;
        }
        .streak-label {
            font-size: 12px;
            color: #666;
            margin-bottom: 4px;
        }
        .streak-value {
            font-size: 24px;
            font-weight: 500;
            color: #FF9898;
        }
        .streak-value span {
            font-size: 14px;
            font-weight: normal;
            color: #999;
        }
        .calendar-days {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 8px;
        }
        .calendar-day {
            aspect-ratio: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #f5f5f5;
            border-radius: 8px;
            font-size: 14px;
            color: #999;
        }
        .calendar-day.active {
            background: #FFF0F0;
            color: #FF9898;
            font-weight: 500;
        }
        .achievement-preview {
            background: white;
            border-radius: 12px;
            padding: 16px;
            margin-bottom: 16px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }
        .recent-achievements {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .achievement-item {
            display: flex;
            align-items: center;
            padding: 12px;
            background: #f9f9f9;
            border-radius: 8px;
        }
        .achievement-icon {
            width: 40px;
            height: 40px;
            background: #FFF0F0;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            margin-right: 12px;
        }
        .achievement-info {
            flex: 1;
        }
        .achievement-name {
            font-weight: 500;
            color: #333;
            margin-bottom: 4px;
        }
        .achievement-desc {
            font-size: 12px;
            color: #666;
        }
        .achievement-date {
            font-size: 12px;
            color: #999;
        }
        
        /* 健康档案页面样式 */
        .health-section {
            background: white;
            border-radius: 12px;
            padding: 16px;
            margin-bottom: 16px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }
        .section-desc {
            color: #999;
            font-size: 14px;
            margin-bottom: 16px;
        }
        .allergen-list {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 8px;
        }
        .allergen-item {
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 6px 12px;
            background: #FFF0F0;
            border-radius: 16px;
            font-size: 14px;
            color: #FF9898;
        }
        .allergen-name {
            font-weight: 500;
        }
        .allergen-remove {
            cursor: pointer;
            width: 16px;
            height: 16px;
            line-height: 16px;
            text-align: center;
            border-radius: 50%;
            background: #FFE4E4;
            font-size: 12px;
        }
        .allergen-add {
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 6px 12px;
            background: #f5f5f5;
            border-radius: 16px;
            font-size: 14px;
            color: #999;
            cursor: pointer;
        }
        .allergen-add:hover {
            background: #FFE4E4;
            color: #FF9898;
        }
        .allergen-add-icon {
            font-weight: bold;
        }
        .dietary-options {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
        }
        .dietary-option {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .dietary-option input[type="checkbox"] {
            width: 18px;
            height: 18px;
            accent-color: #FF9898;
        }
        .dietary-option label {
            font-size: 14px;
            color: #666;
            cursor: pointer;
        }
        
        /* 设置页面样式 */
        .settings-group {
            margin-bottom: 16px;
            padding-bottom: 16px;
            border-bottom: 1px solid #f0f0f0;
        }
        .settings-group:last-child {
            margin-bottom: 0;
            padding-bottom: 0;
            border-bottom: none;
        }
        .settings-title {
            font-weight: 500;
            margin-bottom: 12px;
            color: #333;
            font-size: 16px;
        }
        .settings-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }
        .settings-item:last-child {
            margin-bottom: 0;
        }
        .settings-label {
            color: #666;
            flex: 1;
        }
        .settings-value {
            flex: 1;
            text-align: right;
        }
        .settings-input, .settings-select {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #eee;
            border-radius: 8px;
            font-size: 14px;
            transition: all 0.3s ease;
        }
        .settings-input:focus, .settings-select:focus {
            outline: none;
            border-color: #FFB6C1;
            box-shadow: 0 0 0 3px rgba(255, 152, 152, 0.1);
        }
        .settings-textarea {
            width: 100%;
            height: 80px;
            padding: 8px 12px;
            border: 1px solid #eee;
            border-radius: 8px;
            font-size: 14px;
            resize: none;
            transition: all 0.3s ease;
        }
        .settings-textarea:focus {
            outline: none;
            border-color: #FFB6C1;
            box-shadow: 0 0 0 3px rgba(255, 152, 152, 0.1);
        }
        .settings-button {
            padding: 6px 12px;
            background: #f5f5f5;
            border: none;
            border-radius: 8px;
            color: #666;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .settings-button:hover {
            background: #e5e5e5;
        }
        .settings-button.danger {
            background: #FFF0F0;
            color: #FF9898;
        }
        .settings-button.danger:hover {
            background: #FFE4E4;
        }
        .toggle {
            position: relative;
            display: inline-block;
            width: 40px;
            height: 20px;
        }
        .toggle input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        .toggle-slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
            border-radius: 20px;
        }
        .toggle-slider:before {
            position: absolute;
            content: "";
            height: 16px;
            width: 16px;
            left: 2px;
            bottom: 2px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }
        input:checked + .toggle-slider {
            background-color: #FF9898;
        }
        input:checked + .toggle-slider:before {
            transform: translateX(20px);
        }
        
        /* 主题颜色选择器 */
        .color-options {
            display: flex;
            gap: 10px;
            margin-top: 8px;
        }
        .color-option {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            cursor: pointer;
            border: 2px solid transparent;
            transition: all 0.3s ease;
        }
        .color-option.selected {
            border-color: #333;
            transform: scale(1.1);
        }
        .color-option:hover {
            transform: scale(1.1);
        }
        
        /* 通用组件样式 */
        .publish-header {
            margin: -16px -16px 16px;
            padding: 16px;
            background: white;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }
        .close-btn {
            color: #666;
            font-size: 20px;
            cursor: pointer;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: all 0.3s ease;
        }
        .close-btn:hover {
            background: #f5f5f5;
        }
        .publish-title {
            font-weight: 500;
        }
        .publish-action {
            color: #FF9898;
            font-size: 14px;
            cursor: pointer;
            padding: 6px 12px;
            border-radius: 16px;
            transition: all 0.3s ease;
        }
        .publish-action:hover {
            background: #FFF0F0;
        }
        .content-input {
            background: white;
            border-radius: 12px;
            padding: 16px;
            margin-bottom: 16px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }
        .content-textarea {
            width: 100%;
            height: 120px;
            border: none;
            resize: none;
            font-size: 14px;
            outline: none;
            margin-bottom: 16px;
        }
        .image-upload {
            aspect-ratio: 1;
            width: 80px;
            height: 80px;
            background: #f5f5f5;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px dashed #ddd;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .image-upload:hover {
            border-color: #FFB6C1;
            background: #FFF0F0;
        }
        .image-upload-container {
            display: flex;
            gap: 8px;
            margin-top: 12px;
        }
        .topic-selector-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 12px;
        }
        .topic-option {
            padding: 6px 16px;
            border-radius: 16px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .topic-option.selected {
            background: #FFF0F0;
            color: #FF9898;
        }
        .topic-option:not(.selected) {
            background: #f5f5f5;
            color: #666;
        }
        .topic-option:not(.selected):hover {
            background: #FFE4E4;
            color: #FF9898;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="heading">界面原型-用户页面</div>
        
        <div class="card">
            <div class="card-header">
                <span>设计说明</span>
            </div>
            <div class="card-content">
                <div class="note">
                    <strong>设计说明：</strong> 用户页面实现了个人中心功能，提供健康档案管理、成就体系和社交功能，支持用户个性化设置和数据共享。
                </div>
            </div>
        </div>

        <div class="prototype-area">
            <div class="prototype-column">
                <!-- 登录注册页面 -->
                <div class="card">
                    <div class="card-header">
                        <span>用户页面 - 登录注册</span>
                    </div>
                    <div class="card-content">
                        <div class="prototype-preview">
                            <div class="prototype-nav">
                                👋 欢迎使用食刻日记
                            </div>
                            <div class="prototype-content" style="background: linear-gradient(135deg, #fff6f6, #fff0f0); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px;">
                                <!-- 应用Logo -->
                                <div style="width: 100px; height: 100px; background: #FF9898; border-radius: 20px; margin-bottom: 24px; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 20px rgba(255, 152, 152, 0.2);">
                                    <span style="font-size: 40px;">🍚</span>
                                    </div>
                                
                                <!-- 应用名称 -->
                                <div style="font-size: 22px; font-weight: 600; margin-bottom: 8px; color: #333;">食刻日记</div>
                                <div style="font-size: 14px; color: #666; margin-bottom: 40px; text-align: center;">记录美食，不再纠结吃什么~</div>
                                
                                <!-- 微信登录按钮 -->
                                <div style="width: 100%; max-width: 280px; margin-bottom: 16px;">
                                    <button style="width: 100%; background: #07C160; color: white; border: none; padding: 12px 0; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 500; box-shadow: 0 4px 8px rgba(7, 193, 96, 0.2); cursor: pointer;">
                                        <span style="margin-right: 8px;">🔒</span> 微信一键登录
                                    </button>
                                </div>

                                <!-- 隐私政策提示 -->
                                <div style="font-size: 12px; color: #999; text-align: center; margin-top: 20px; max-width: 280px;">
                                    登录即表示您同意我们的<span style="color: #FF9898; text-decoration: underline;">用户协议</span>和<span style="color: #FF9898; text-decoration: underline;">隐私政策</span>
                                            </div>
                                
                                <!-- 功能亮点展示 -->
                                <div style="margin-top: 40px; width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; max-width: 280px;">
                                    <div style="width: 48%; background: white; padding: 12px; border-radius: 12px; margin-bottom: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.05);">
                                        <div style="font-size: 20px; margin-bottom: 4px;">📝</div>
                                        <div style="font-size: 14px; font-weight: 500; margin-bottom: 4px; color: #333;">记录饮食</div>
                                        <div style="font-size: 12px; color: #666;">轻松记录每日饮食</div>
                                        </div>
                                    <div style="width: 48%; background: white; padding: 12px; border-radius: 12px; margin-bottom: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.05);">
                                        <div style="font-size: 20px; margin-bottom: 4px;">🏆</div>
                                        <div style="font-size: 14px; font-weight: 500; margin-bottom: 4px; color: #333;">成就系统</div>
                                        <div style="font-size: 12px; color: #666;">解锁饮食成就徽章</div>
                                        </div>
                                    <div style="width: 48%; background: white; padding: 12px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.05);">
                                        <div style="font-size: 20px; margin-bottom: 4px;">📊</div>
                                        <div style="font-size: 14px; font-weight: 500; margin-bottom: 4px; color: #333;">营养分析</div>
                                        <div style="font-size: 12px; color: #666;">了解个人饮食健康</div>
                                        </div>
                                    <div style="width: 48%; background: white; padding: 12px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.05);">
                                        <div style="font-size: 20px; margin-bottom: 4px;">👥</div>
                                        <div style="font-size: 14px; font-weight: 500; margin-bottom: 4px; color: #333;">社区分享</div>
                                        <div style="font-size: 12px; color: #666;">与好友分享美食</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                                        </div>
                                    </div>

                <!-- 授权信息页面 -->
                <div class="card">
                    <div class="card-header">
                        <span>用户页面 - 授权信息</span>
                                            </div>
                    <div class="card-content">
                        <div class="prototype-preview">
                            <div class="prototype-nav">
                                🔒 授权信息
                                        </div>
                            <div class="prototype-content" style="background: #fff; display: flex; flex-direction: column; align-items: center; padding: 24px 20px;">
                                <!-- 头像和昵称获取 -->
                                <div style="width: 100%; max-width: 320px; background: #fff; border-radius: 12px; padding: 20px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); margin-bottom: 24px;">
                                    <div style="text-align: center; margin-bottom: 16px;">
                                        <div style="font-size: 16px; font-weight: 600; margin-bottom: 8px; color: #333;">获取微信头像和昵称</div>
                                        <div style="font-size: 14px; color: #666; margin-bottom: 16px;">我们需要获取您的微信头像和昵称以完善个人资料</div>
                                        
                                        <div style="width: 80px; height: 80px; background: #f5f5f5; border-radius: 50%; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; border: 2px dashed #ddd;">
                                            <span style="font-size: 30px; color: #ccc;">👤</span>
                                        </div>
                                        
                                        <div style="font-size: 16px; color: #999;">微信昵称</div>
                                        </div>
                                    
                                    <div style="display: flex; gap: 12px;">
                                        <button style="flex: 1; background: #f5f5f5; border: none; padding: 10px 0; border-radius: 8px; color: #666;">拒绝</button>
                                        <button style="flex: 1; background: #07C160; border: none; padding: 10px 0; border-radius: 8px; color: white; font-weight: 500;">允许</button>
                                        </div>
                                    </div>
                                
                                <!-- 用户标签选择
                                <div style="width: 100%; max-width: 320px; background: #fff; border-radius: 12px; padding: 20px; box-shadow: 0 2px 12px rgba(0,0,0,0.08);">
                                    <div style="text-align: center; margin-bottom: 16px;">
                                        <div style="font-size: 16px; font-weight: 600; margin-bottom: 8px; color: #333;">选择您的饮食偏好(选填)</div>
                                        <div style="font-size: 14px; color: #666; margin-bottom: 16px;">帮助我们推荐更符合您口味的内容</div>
                                </div>

                                    <div style="display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px;">
                                        <div style="background: #FFF0F0; color: #FF9898; padding: 6px 12px; border-radius: 16px; font-size: 14px;">川菜</div>
                                        <div style="background: #f5f5f5; color: #666; padding: 6px 12px; border-radius: 16px; font-size: 14px;">粤菜</div>
                                        <div style="background: #f5f5f5; color: #666; padding: 6px 12px; border-radius: 16px; font-size: 14px;">江浙菜</div>
                                        <div style="background: #f5f5f5; color: #666; padding: 6px 12px; border-radius: 16px; font-size: 14px;">西餐</div>
                                        <div style="background: #FFF0F0; color: #FF9898; padding: 6px 12px; border-radius: 16px; font-size: 14px;">甜点</div>
                                        <div style="background: #f5f5f5; color: #666; padding: 6px 12px; border-radius: 16px; font-size: 14px;">火锅</div>
                                        <div style="background: #f5f5f5; color: #666; padding: 6px 12px; border-radius: 16px; font-size: 14px;">烧烤</div>
                                        <div style="background: #FFF0F0; color: #FF9898; padding: 6px 12px; border-radius: 16px; font-size: 14px;">素食</div>
                                    </div>
                                    
                                    <div style="text-align: right;">
                                        <button style="background: #FF9898; border: none; padding: 8px 16px; border-radius: 8px; color: white; font-weight: 500;">确认并继续</button>
                                    </div>
                                </div> -->
                                
                                <!-- 跳过按钮 -->
                                <div style="margin-top: 20px;">
                                    <button style="background: transparent; border: 1px solid #ddd; padding: 8px 16px; border-radius: 16px; color: #999; font-size: 14px;">跳过，直接进入</button>
                                </div>
                                
                                <!-- 隐私提示 -->
                                <div style="font-size: 12px; color: #999; text-align: center; margin-top: 16px; max-width: 280px;">
                                    我们将严格保护您的个人信息安全，详见<span style="color: #FF9898; text-decoration: underline;">隐私政策</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 个人中心页面 -->
                <div class="card">
                    <div class="card-header">
                        <span>用户页面 - 个人中心</span>
                    </div>
                    <div class="card-content">
                        <div class="prototype-preview">
                            <div class="prototype-nav">
                                👤 个人中心
                            </div>
                            <div class="prototype-content">
                                <!-- 用户信息 -->
                                <div class="user-profile">
                                    <div class="user-avatar">👤</div>
                                    <div class="user-details">
                                        <div class="user-name">张小厨</div>
                                        <div class="user-bio">热爱美食和健康生活的探索者</div>
                                    </div>
                                    <div class="edit-profile">编辑</div>
                                </div>

                                <!-- 用户数据统计 -->
                                <div class="stats-section">
                                    <div class="stat-item">
                                        <div class="stat-value">128</div>
                                        <div class="stat-label">打卡天数</div>
                                            </div>
                                    <div class="stat-item">
                                        <div class="stat-value">23</div>
                                        <div class="stat-label">食坛动态</div>
                                        </div>
                                    <div class="stat-item">
                                        <div class="stat-value">46</div>
                                        <div class="stat-label">好友数</div>
                                        </div>
                                        </div>

                                <!-- 功能模块入口 -->
                                <div class="modules-section">
                                    <div class="modules-title">功能中心</div>
                                    <div class="modules-grid">
                                        <div class="module-card">
                                            <div class="module-icon">🏥</div>
                                            <div class="module-title">健康档案</div>
                                        </div>
                                        <div class="module-card">
                                            <div class="module-icon">🏆</div>
                                            <div class="module-title">成就徽章</div>
                                        </div>
                                        <div class="module-card">
                                            <div class="module-icon">📊</div>
                                            <div class="module-title">饮食报告</div>
                                        </div>
                                        <div class="module-card">
                                            <div class="module-icon">⚙️</div>
                                            <div class="module-title">设置</div>
                                        </div>
                                        <div class="module-card">
                                            <div class="module-icon">❓</div>
                                            <div class="module-title">帮助</div>
                                        </div>
                                        </div>
                                    </div>

                                <!-- 连续打卡展示 -->
                                <div class="streak-section">
                                    <div class="section-header">
                                        <div class="section-title">连续打卡</div>
                                        <div class="section-more">查看全部</div>
                                            </div>
                                    <div class="streak-stats">
                                        <div class="streak-stat">
                                            <div class="streak-label">当前连续</div>
                                            <div class="streak-value">12<span>天</span></div>
                                        </div>
                                        <div class="streak-stat">
                                            <div class="streak-label">最长连续</div>
                                            <div class="streak-value">28<span>天</span></div>
                                        </div>
                                        </div>
                                    <div class="calendar-days">
                                        <div class="calendar-day active">一</div>
                                        <div class="calendar-day active">二</div>
                                        <div class="calendar-day active">三</div>
                                        <div class="calendar-day active">四</div>
                                        <div class="calendar-day active">五</div>
                                        <div class="calendar-day">六</div>
                                        <div class="calendar-day">日</div>
                                    </div>
                                </div>
                                
                                <!-- 最近成就 -->
                                <div class="achievement-preview">
                                    <div class="section-header">
                                        <div class="section-title">最近获得的成就</div>
                                        <div class="section-more">查看全部</div>
                                    </div>
                                    <div class="recent-achievements">
                                        <div class="achievement-item">
                                            <div class="achievement-icon">🥈</div>
                                            <div class="achievement-info">
                                                <div class="achievement-name">三周达人</div>
                                                <div class="achievement-desc">连续打卡21天</div>
                                            </div>
                                            <div class="achievement-date">昨天</div>
                                        </div>
                                        <div class="achievement-item">
                                            <div class="achievement-icon">🍚</div>
                                            <div class="achievement-info">
                                                <div class="achievement-name">米饭专家</div>
                                                <div class="achievement-desc">尝试5种不同米饭</div>
                                            </div>
                                            <div class="achievement-date">3天前</div>
                                        </div>
                                    </div>
                                </div>

                                <!-- 底部导航栏 -->
                                <div class="tab-bar">
                                    <a href="index.html" class="tab-item">
                                        <div class="tab-icon">🏠</div>
                                        <div class="tab-text">首页</div>
                                    </a>
                                    <a href="records.html" class="tab-item">
                                        <div class="tab-icon">🌾</div>
                                        <div class="tab-text">粮仓</div>
                                    </a>
                                    <a href="community.html" class="tab-item">
                                        <div class="tab-icon">🍽️</div>
                                        <div class="tab-text">食坛</div>
                                    </a>
                                    <div class="tab-item active">
                                        <div class="tab-icon">👤</div>
                                        <div class="tab-text">我的</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 健康档案页面 -->
                <div class="card">
                    <div class="card-header">
                        <span>用户页面 - 健康档案</span>
                    </div>
                    <div class="card-content">
                        <div class="prototype-preview">
                            <div class="prototype-nav">
                                👤 个人中心 - 健康档案
                            </div>
                            <div class="prototype-content">
                                <div class="publish-header">
                                    <div class="close-btn">×</div>
                                    <div class="publish-title">健康档案</div>
                                    <div class="publish-action">保存</div>
                                </div>

                                <!-- 过敏源设置 -->
                                <div class="health-section">
                                    <div class="section-header">
                                        <div class="section-title">过敏源红名单</div>
                                        </div>
                                    <div class="section-desc">系统将自动过滤包含以下食材的推荐内容</div>
                                    
                                    <div class="allergen-list">
                                        <div class="allergen-item">
                                            <span class="allergen-name">海鲜</span>
                                            <span class="allergen-remove">×</span>
                                    </div>
                                        <div class="allergen-item">
                                            <span class="allergen-name">坚果</span>
                                            <span class="allergen-remove">×</span>
                                    </div>
                                        <div class="allergen-item">
                                            <span class="allergen-name">牛奶</span>
                                            <span class="allergen-remove">×</span>
                                    </div>
                                        <div class="allergen-add">
                                            <span class="allergen-add-icon">+</span>
                                            <span>添加</span>
                                    </div>
                                                    </div>
                                                    </div>
                                
                                <!-- 饮食禁忌设置 -->
                                <div class="health-section">
                                    <div class="section-header">
                                        <div class="section-title">饮食禁忌设置</div>
                                                </div>
                                    <div class="section-desc">根据宗教或文化习惯设置饮食禁忌</div>
                                    
                                    <div class="dietary-options">
                                        <div class="dietary-option">
                                            <input type="checkbox" id="vegetarian" checked>
                                            <label for="vegetarian">素食主义</label>
                                            </div>
                                        <div class="dietary-option">
                                            <input type="checkbox" id="vegan">
                                            <label for="vegan">纯素食主义</label>
                                        </div>
                                        <div class="dietary-option">
                                            <input type="checkbox" id="halal">
                                            <label for="halal">清真饮食</label>
                                                    </div>
                                        <div class="dietary-option">
                                            <input type="checkbox" id="kosher">
                                            <label for="kosher">犹太饮食</label>
                                                    </div>
                                        <div class="dietary-option">
                                            <input type="checkbox" id="no-pork">
                                            <label for="no-pork">不吃猪肉</label>
                                                </div>
                                        <div class="dietary-option">
                                            <input type="checkbox" id="no-beef">
                                            <label for="no-beef">不吃牛肉</label>
                                            </div>
                                                        </div>
                                                        </div>
                                
                                <!-- 特殊营养需求 -->
                                <div class="health-section">
                                    <div class="section-header">
                                        <div class="section-title">特殊营养需求</div>
                                                    </div>
                                    <div class="section-desc">根据身体状况设置特殊饮食需求</div>
                                    
                                    <div class="dietary-options">
                                        <div class="dietary-option">
                                            <input type="checkbox" id="low-salt">
                                            <label for="low-salt">低盐饮食</label>
                                                </div>
                                        <div class="dietary-option">
                                            <input type="checkbox" id="low-sugar">
                                            <label for="low-sugar">低糖饮食</label>
                                            </div>
                                        <div class="dietary-option">
                                            <input type="checkbox" id="low-fat">
                                            <label for="low-fat">低脂饮食</label>
                                        </div>
                                        <div class="dietary-option">
                                            <input type="checkbox" id="high-protein">
                                            <label for="high-protein">高蛋白饮食</label>
                                    </div>
                                    </div>
                                </div>

                                <!-- 底部导航栏 -->
                                <div class="tab-bar">
                                    <a href="index.html" class="tab-item">
                                        <div class="tab-icon">🏠</div>
                                        <div class="tab-text">首页</div>
                                    </a>
                                    <a href="records.html" class="tab-item">
                                        <div class="tab-icon">🌾</div>
                                        <div class="tab-text">粮仓</div>
                                    </a>
                                    <a href="community.html" class="tab-item">
                                        <div class="tab-icon">🍽️</div>
                                        <div class="tab-text">食坛</div>
                                    </a>
                                    <div class="tab-item active">
                                        <div class="tab-icon">👤</div>
                                        <div class="tab-text">我的</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 设置页面 -->
                <div class="card">
                    <div class="card-header">
                        <span>用户页面 - 设置</span>
                    </div>
                    <div class="card-content">
                        <div class="prototype-preview">
                            <div class="prototype-nav">
                                👤 用户 - 设置
                            </div>
                            <div class="prototype-content">
                                <div class="publish-header">
                                    <div class="close-btn">×</div>
                                    <div class="publish-title">设置</div>
                                    <div class="publish-action">保存</div>
                                </div>
                                
                                <!-- 设置内容 -->
                                <div class="content-input">
                                    <div class="settings-group">
                                        <div class="settings-title">个人资料</div>
                                        <div class="settings-item">
                                            <div class="settings-label">用户名</div>
                                            <div class="settings-value">
                                                <input type="text" value="张小厨" class="settings-input">
                                            </div>
                                        </div>
                                        <div class="settings-item">
                                            <div class="settings-label">个人简介</div>
                                            <div class="settings-value">
                                                <textarea class="settings-textarea">热爱美食和健康生活的探索者</textarea>
                                            </div>
                                    </div>
                                </div>

                                    <div class="settings-group">
                                        <div class="settings-title">主题设置</div>
                                        <div class="settings-item">
                                            <div class="settings-label">主题颜色</div>
                                            <div class="settings-value">
                                                <div class="color-options">
                                                    <div class="color-option selected" style="background: #FF9898;"></div>
                                                    <div class="color-option" style="background: #5DADE2;"></div>
                                                    <div class="color-option" style="background: #82E0AA;"></div>
                                                    <div class="color-option" style="background: #F4D03F;"></div>
                                                    <div class="color-option" style="background: #BB8FCE;"></div>
                                            </div>
                                        </div>
                                        </div>
                                        <div class="settings-item">
                                            <div class="settings-label">深色模式</div>
                                            <div class="settings-value">
                                                <label class="toggle">
                                                    <input type="checkbox">
                                                    <span class="toggle-slider"></span>
                                                </label>
                                        </div>
                                        </div>
                                        <div class="settings-item">
                                            <div class="settings-label">字体大小</div>
                                            <div class="settings-value">
                                                <select class="settings-select">
                                                    <option>小</option>
                                                    <option selected>中</option>
                                                    <option>大</option>
                                                </select>
                                            </div>
                                            </div>
                                            </div>
                                    
                                    <div class="settings-group">
                                        <div class="settings-title">通知设置</div>
                                        <div class="settings-item">
                                            <div class="settings-label">新评论通知</div>
                                            <div class="settings-value">
                                                <label class="toggle">
                                                    <input type="checkbox" checked>
                                                    <span class="toggle-slider"></span>
                                                </label>
                                            </div>
                                        </div>
                                        <div class="settings-item">
                                            <div class="settings-label">点赞通知</div>
                                            <div class="settings-value">
                                                <label class="toggle">
                                                    <input type="checkbox" checked>
                                                    <span class="toggle-slider"></span>
                                                </label>
                                            </div>
                                        </div>
                                        <div class="settings-item">
                                            <div class="settings-label">饮食建议通知</div>
                                            <div class="settings-value">
                                                <label class="toggle">
                                                    <input type="checkbox">
                                                    <span class="toggle-slider"></span>
                                                </label>
                                        </div>
                                    </div>
                                </div>

                                    <div class="settings-group">
                                        <div class="settings-title">隐私设置</div>
                                        <div class="settings-item">
                                            <div class="settings-label">谁可以看我的饮食记录</div>
                                            <div class="settings-value">
                                                <select class="settings-select">
                                                    <option>所有人</option>
                                                    <option selected>仅好友</option>
                                                    <option>仅自己</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="settings-group">
                                        <div class="settings-title">其他设置</div>
                                        <div class="settings-item">
                                            <div class="settings-label">清除缓存</div>
                                            <div class="settings-value">
                                                <button class="settings-button">清除</button>
                                            </div>
                                        </div>
                                        <div class="settings-item">
                                            <div class="settings-label">退出登录</div>
                                            <div class="settings-value">
                                                <button class="settings-button danger">退出</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- 底部导航栏 -->
                                <div class="tab-bar">
                                    <a href="index.html" class="tab-item">
                                        <div class="tab-icon">🏠</div>
                                        <div class="tab-text">首页</div>
                                    </a>
                                    <a href="records.html" class="tab-item">
                                        <div class="tab-icon">🌾</div>
                                        <div class="tab-text">粮仓</div>
                                    </a>
                                    <a href="community.html" class="tab-item">
                                        <div class="tab-icon">🍽️</div>
                                        <div class="tab-text">食坛</div>
                                    </a>
                                    <div class="tab-item active">
                                        <div class="tab-icon">👤</div>
                                        <div class="tab-text">我的</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 饮食报告页面 -->
                <div class="card">
                    <div class="card-header">
                        <span>用户页面 - 饮食报告</span>
                    </div>
                    <div class="card-content">
                        <div class="prototype-preview">
                            <div class="prototype-nav">
                                👤 个人中心 - 饮食报告
                            </div>
                            <div class="prototype-content">
                                <div class="publish-header">
                                    <div class="close-btn">×</div>
                                    <div class="publish-title">饮食报告</div>
                                    <div class="publish-action">分享</div>
                                </div>

                                <!-- 饮食总结 -->
                                <div class="health-section">
                                    <div class="section-header">
                                        <div class="section-title">本周饮食总结</div>
                                    </div>
                                    
                                    <div style="background: #f9f9f9; padding: 16px; border-radius: 12px; margin-bottom: 16px;">
                                        <div style="display: flex; justify-content: space-between; margin-bottom: 12px;">
                                            <div style="font-size: 14px; color: #666;">总热量摄入</div>
                                            <div style="font-weight: 500; color: #FF9898;">9,760 kcal</div>
                                        </div>
                                        <div style="height: 120px; display: flex; align-items: flex-end; gap: 8px; margin-bottom: 8px;">
                                            <div style="flex: 1; height: 60%; background: #FFB6C1; border-radius: 4px 4px 0 0; position: relative;">
                                                <div style="position: absolute; bottom: -20px; left: 0; right: 0; text-align: center; font-size: 12px;">周一</div>
                                            </div>
                                            <div style="flex: 1; height: 80%; background: #FFB6C1; border-radius: 4px 4px 0 0; position: relative;">
                                                <div style="position: absolute; bottom: -20px; left: 0; right: 0; text-align: center; font-size: 12px;">周二</div>
                                            </div>
                                            <div style="flex: 1; height: 65%; background: #FFB6C1; border-radius: 4px 4px 0 0; position: relative;">
                                                <div style="position: absolute; bottom: -20px; left: 0; right: 0; text-align: center; font-size: 12px;">周三</div>
                                            </div>
                                            <div style="flex: 1; height: 90%; background: #FFB6C1; border-radius: 4px 4px 0 0; position: relative;">
                                                <div style="position: absolute; bottom: -20px; left: 0; right: 0; text-align: center; font-size: 12px;">周四</div>
                                            </div>
                                            <div style="flex: 1; height: 50%; background: #FFB6C1; border-radius: 4px 4px 0 0; position: relative;">
                                                <div style="position: absolute; bottom: -20px; left: 0; right: 0; text-align: center; font-size: 12px;">周五</div>
                                            </div>
                                            <div style="flex: 1; height: 75%; background: #FFB6C1; border-radius: 4px 4px 0 0; position: relative;">
                                                <div style="position: absolute; bottom: -20px; left: 0; right: 0; text-align: center; font-size: 12px;">周六</div>
                                            </div>
                                            <div style="flex: 1; height: 45%; background: #FFB6C1; border-radius: 4px 4px 0 0; position: relative;">
                                                <div style="position: absolute; bottom: -20px; left: 0; right: 0; text-align: center; font-size: 12px;">周日</div>
                                            </div>
                                        </div>
                                        <div style="height: 20px;"></div>
                                </div>

                                    <div style="background: #f9f9f9; padding: 16px; border-radius: 12px;">
                                        <div style="font-size: 14px; color: #666; margin-bottom: 12px;">营养素摄入比例</div>
                                        <div style="display: flex; margin-bottom: 16px;">
                                            <div style="flex: 0.3; height: 24px; background: #FFB6C1; border-radius: 4px 0 0 4px;"></div>
                                            <div style="flex: 0.5; height: 24px; background: #90EE90;"></div>
                                            <div style="flex: 0.2; height: 24px; background: #ADD8E6; border-radius: 0 4px 4px 0;"></div>
                                        </div>
                                        <div style="display: flex; gap: 16px;">
                                            <div style="display: flex; align-items: center; gap: 4px;">
                                                <div style="width: 12px; height: 12px; background: #FFB6C1; border-radius: 50%;"></div>
                                                <div style="font-size: 12px; color: #666;">蛋白质 30%</div>
                                            </div>
                                            <div style="display: flex; align-items: center; gap: 4px;">
                                                <div style="width: 12px; height: 12px; background: #90EE90; border-radius: 50%;"></div>
                                                <div style="font-size: 12px; color: #666;">碳水 50%</div>
                                            </div>
                                            <div style="display: flex; align-items: center; gap: 4px;">
                                                <div style="width: 12px; height: 12px; background: #ADD8E6; border-radius: 50%;"></div>
                                                <div style="font-size: 12px; color: #666;">脂肪 20%</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- 饮食习惯分析 -->
                                <div class="health-section">
                                    <div class="section-header">
                                        <div class="section-title">饮食习惯分析</div>
                                    </div>
                                    
                                    <div style="background: #FFF0F0; padding: 16px; border-radius: 12px; margin-bottom: 16px;">
                                        <div style="font-weight: 500; color: #FF9898; margin-bottom: 8px;">饮食建议</div>
                                        <div style="font-size: 14px; color: #666; line-height: 1.6;">
                                            根据您的记录，建议增加蔬菜摄入量，减少油炸食品。周四热量摄入过高，可以适当控制晚餐份量。
                                    </div>
                                </div>

                                    <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;">
                                        <div style="background: #f9f9f9; padding: 12px; border-radius: 12px;">
                                            <div style="font-size: 14px; font-weight: 500; color: #333; margin-bottom: 8px;">常吃食物</div>
                                            <div style="display: flex; flex-wrap: wrap; gap: 8px;">
                                                <div style="background: #FFE4E4; color: #FF9898; font-size: 12px; padding: 4px 8px; border-radius: 12px;">米饭</div>
                                                <div style="background: #FFE4E4; color: #FF9898; font-size: 12px; padding: 4px 8px; border-radius: 12px;">西红柿</div>
                                                <div style="background: #FFE4E4; color: #FF9898; font-size: 12px; padding: 4px 8px; border-radius: 12px;">鸡蛋</div>
                                                <div style="background: #FFE4E4; color: #FF9898; font-size: 12px; padding: 4px 8px; border-radius: 12px;">豆腐</div>
                                            </div>
                                        </div>
                                        <div style="background: #f9f9f9; padding: 12px; border-radius: 12px;">
                                            <div style="font-size: 14px; font-weight: 500; color: #333; margin-bottom: 8px;">建议尝试</div>
                                            <div style="display: flex; flex-wrap: wrap; gap: 8px;">
                                                <div style="background: #E6F7FF; color: #1890FF; font-size: 12px; padding: 4px 8px; border-radius: 12px;">菠菜</div>
                                                <div style="background: #E6F7FF; color: #1890FF; font-size: 12px; padding: 4px 8px; border-radius: 12px;">燕麦</div>
                                                <div style="background: #E6F7FF; color: #1890FF; font-size: 12px; padding: 4px 8px; border-radius: 12px;">三文鱼</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- 生成报告分享 -->
                                <div class="health-section">
                                    <div style="display: flex; flex-direction: column; align-items: center; gap: 16px;">
                                        <button style="background: linear-gradient(45deg, #FF9898, #FFB6C1); border: none; color: white; padding: 10px 20px; border-radius: 20px; font-weight: 500; box-shadow: 0 2px 8px rgba(255, 152, 152, 0.3); cursor: pointer;">
                                            生成分享海报
                                        </button>
                                        <div style="font-size: 12px; color: #999; text-align: center;">
                                            分享你的健康饮食历程，邀请好友一起参与
                                        </div>
                                    </div>
                                </div>

                                <!-- 底部导航栏 -->
                                <div class="tab-bar">
                                    <a href="index.html" class="tab-item">
                                        <div class="tab-icon">🏠</div>
                                        <div class="tab-text">首页</div>
                                    </a>
                                    <a href="records.html" class="tab-item">
                                        <div class="tab-icon">🌾</div>
                                        <div class="tab-text">粮仓</div>
                                    </a>
                                    <a href="community.html" class="tab-item">
                                        <div class="tab-icon">🍽️</div>
                                        <div class="tab-text">食坛</div>
                                    </a>
                                    <div class="tab-item active">
                                        <div class="tab-icon">👤</div>
                                        <div class="tab-text">我的</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="description-column">
                <div class="card">
                    <div class="card-header">
                        <span>用户模块功能需求</span>
                    </div>
                    <div class="card-content">
                        <div class="requirement">
                            <div class="requirement-title">1. 登录注册</div>
                            <div class="requirement-desc">
                                <p>- 微信一键登录（获取openid和unionid）</p>
                                <p>- 授权获取微信头像和昵称</p>
                                <p>- 初始选择饮食偏好标签（可选）</p>
                                <p>- 隐私政策和用户协议提示</p>
                            </div>
                        </div>

                        <div class="requirement">
                            <div class="requirement-title">2. 健康档案</div>
                            <div class="requirement-desc">
                                <p>- 过敏源红名单（自动过滤推荐内容）</p>
                                <p>- 饮食禁忌设置（宗教/文化禁忌）</p>
                            </div>
                        </div>

                        <div class="requirement">
                            <div class="requirement-title">3. 成就体系</div>
                            <div class="requirement-desc">
                                <p>- 连续打卡奖励（7日/21日/100日徽章）</p>
                                <p>- 饮食探索者称号（尝新5种菜系解锁）</p>
                        </div>
                    </div>

                        <div class="requirement">
                            <div class="requirement-title">4. 社交功能</div>
                            <div class="requirement-desc">
                                <p>- 生成饮食报告海报（模板+自定义文案）</p>
                                <p>- 匿名对比好友饮食结构（需双方授权）</p>
                            </div>
                        </div>
                        
                        <div class="requirement">
                            <div class="requirement-title">5. 隐私设置</div>
                            <div class="requirement-desc">
                                <p>- 饮食记录可见性（公开/好友可见/私密）</p>
                                <p>- 个人资料可见性设置</p>
                                <p>- 标记权限与搜索可见性设置</p>
                            </div>
                        </div>
                        
                        <div class="requirement">
                            <div class="requirement-title">6. 主题设置</div>
                            <div class="requirement-desc">
                                <p>- 提供多种主题色选择（粉色、蓝色、绿色等）</p>
                                <p>- 支持深色模式切换</p>
                                <p>- 字体大小调整选项</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 添加额外内容填充右侧空白区域 -->
                <div class="card">
                    <div class="card-header">
                        <span>用户体验说明</span>
                    </div>
                    <div class="card-content">
                        <div class="requirement">
                            <div class="requirement-title">个人中心设计原则</div>
                            <div class="requirement-desc">
                                <p>- <strong>简洁明了</strong>：提供用户最关心的信息，不堆砌无用数据</p>
                                <p>- <strong>功能分区</strong>：核心功能入口清晰，便于快速访问</p>
                                <p>- <strong>成就激励</strong>：通过数据展示和徽章系统鼓励用户坚持健康饮食</p>
                            </div>
                        </div>

                        <div class="requirement">
                            <div class="requirement-title">饮食报告特点</div>
                            <div class="requirement-desc">
                                <p>- <strong>可视化数据</strong>：直观图表展示摄入量和营养结构</p>
                                <p>- <strong>个性化建议</strong>：根据用户记录提供针对性饮食建议</p>
                                <p>- <strong>社交分享</strong>：提供精美海报模板方便分享到社交平台</p>
                            </div>
                        </div>

                        <div class="requirement">
                            <div class="requirement-title">发布动态指南</div>
                            <div class="requirement-desc">
                                <p>- <strong>内容丰富</strong>：支持文字、图片多种形式记录美食体验</p>
                                <p>- <strong>话题分类</strong>：通过标签系统方便内容整理和发现</p>
                                <p>- <strong>简化操作</strong>：三步即可完成发布，减少用户操作负担</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 用户反馈数据 -->
                <div class="card">
                    <div class="card-header">
                        <span>用户反馈数据</span>
                    </div>
                    <div class="card-content">
                        <div style="margin-bottom: 16px;">
                            <div style="font-weight: 500; margin-bottom: 8px;">功能满意度排名</div>
                            <div style="display: flex; flex-direction: column; gap: 8px;">
                                <div>
                                    <div style="display: flex; justify-content: space-between; margin-bottom: 4px;">
                                        <span style="font-size: 14px;">健康档案</span>
                                        <span style="font-size: 14px; color: #FF9898;">92%</span>
                                    </div>
                                    <div style="height: 8px; background: #f0f0f0; border-radius: 4px; overflow: hidden;">
                                        <div style="width: 92%; height: 100%; background: #FF9898;"></div>
                                    </div>
                                </div>
                                <div>
                                    <div style="display: flex; justify-content: space-between; margin-bottom: 4px;">
                                        <span style="font-size: 14px;">饮食报告</span>
                                        <span style="font-size: 14px; color: #FF9898;">88%</span>
                                    </div>
                                    <div style="height: 8px; background: #f0f0f0; border-radius: 4px; overflow: hidden;">
                                        <div style="width: 88%; height: 100%; background: #FF9898;"></div>
                                    </div>
                                </div>
                                <div>
                                    <div style="display: flex; justify-content: space-between; margin-bottom: 4px;">
                                        <span style="font-size: 14px;">成就系统</span>
                                        <span style="font-size: 14px; color: #FF9898;">76%</span>
                                    </div>
                                    <div style="height: 8px; background: #f0f0f0; border-radius: 4px; overflow: hidden;">
                                        <div style="width: 76%; height: 100%; background: #FF9898;"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div>
                            <div style="font-weight: 500; margin-bottom: 8px;">待优化功能</div>
                            <div style="background: #FFF0F0; padding: 12px; border-radius: 8px;">
                                <p style="margin: 0; font-size: 14px; color: #666; margin-bottom: 8px;">根据用户反馈，以下功能需要进一步优化：</p>
                                <ul style="margin: 0; padding-left: 20px; font-size: 14px; color: #666;">
                                    <li>动态发布页面的图片上传功能</li>
                                    <li>成就解锁的通知提醒</li>
                                    <li>设置页面的数据恢复备份功能</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 数据库表设计 - 移至主内容区域 -->
        <div class="card">
            <div class="card-header">
                <span>数据库表设计</span>
            </div>
            <div class="card-content">
                <div class="requirement">
                    <div class="requirement-title">1. 用户表 (users)</div>
                    <div class="requirement-desc">
                        <table style="width: 100%; border-collapse: collapse; margin-bottom: 16px;">
                            <tr style="background: #f5f5f5;">
                                <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">字段名称</th>
                                <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">必填/选填</th>
                                <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">类型</th>
                                <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">长度限制</th>
                                <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">输入规则</th>
                                <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">是否唯一</th>
                            </tr>
                            <tr>
                                <td style="padding: 8px; border: 1px solid #ddd;">username</td>
                                <td style="padding: 8px; border: 1px solid #ddd;">必填</td>
                                <td style="padding: 8px; border: 1px solid #ddd;">VARCHAR</td>
                                <td style="padding: 8px; border: 1px solid #ddd;">2-20</td>
                                <td style="padding: 8px; border: 1px solid #ddd;">字母、数字、下划线</td>
                                <td style="padding: 8px; border: 1px solid #ddd;">是</td>
                            </tr>
                            <tr>
                                <td style="padding: 8px; border: 1px solid #ddd;">email</td>
                                <td style="padding: 8px; border: 1px solid #ddd;">必填</td>
                                <td style="padding: 8px; border: 1px solid #ddd;">VARCHAR</td>
                                <td style="padding: 8px; border: 1px solid #ddd;">≤50</td>
                                <td style="padding: 8px; border: 1px solid #ddd;">有效邮箱格式</td>
                                <td style="padding: 8px; border: 1px solid #ddd;">是</td>
                            </tr>
                            <tr>
                                <td style="padding: 8px; border: 1px solid #ddd;">password</td>
                                <td style="padding: 8px; border: 1px solid #ddd;">必填</td>
                                <td style="padding: 8px; border: 1px solid #ddd;">VARCHAR</td>
                                <td style="padding: 8px; border: 1px solid #ddd;">≥8</td>
                                <td style="padding: 8px; border: 1px solid #ddd;">密码加密存储</td>
                                <td style="padding: 8px; border: 1px solid #ddd;">否</td>
                            </tr>
                            <tr>
                                <td style="padding: 8px; border: 1px solid #ddd;">avatar</td>
                                <td style="padding: 8px; border: 1px solid #ddd;">选填</td>
                                <td style="padding: 8px; border: 1px solid #ddd;">VARCHAR</td>
                                <td style="padding: 8px; border: 1px solid #ddd;">≤200</td>
                                <td style="padding: 8px; border: 1px solid #ddd;">图片URL</td>
                                <td style="padding: 8px; border: 1px solid #ddd;">否</td>
                            </tr>
                            <tr>
                                <td style="padding: 8px; border: 1px solid #ddd;">bio</td>
                                <td style="padding: 8px; border: 1px solid #ddd;">选填</td>
                                <td style="padding: 8px; border: 1px solid #ddd;">VARCHAR</td>
                                <td style="padding: 8px; border: 1px solid #ddd;">≤200</td>
                                <td style="padding: 8px; border: 1px solid #ddd;">个人简介</td>
                                <td style="padding: 8px; border: 1px solid #ddd;">否</td>
                            </tr>
                            <tr>
                                <td style="padding: 8px; border: 1px solid #ddd;">created_at</td>
                                <td style="padding: 8px; border: 1px solid #ddd;">必填</td>
                                <td style="padding: 8px; border: 1px solid #ddd;">TIMESTAMP</td>
                                <td style="padding: 8px; border: 1px solid #ddd;">-</td>
                                <td style="padding: 8px; border: 1px solid #ddd;">DEFAULT CURRENT_TIMESTAMP</td>
                                <td style="padding: 8px; border: 1px solid #ddd;">否</td>
                            </tr>
                        </table>
                        <p style="color: #666; font-style: italic; margin-top: 10px;">* 移除所有关联表的物理外键约束</p>
                        <p style="color: #666; font-style: italic; margin-left: 15px;">1. 保留email和username的唯一索引</p>
                        <p style="color: #666; font-style: italic; margin-left: 15px;">2. 注册时校验邮箱和用户名唯一性</p>
                    </div>
                </div>

                <div class="requirement">
                    <div class="requirement-title">2. 用户隐私设置表 (user_privacy_settings)</div>
                    <div class="requirement-desc">
                        <table style="width: 100%; border-collapse: collapse; margin-bottom: 16px;">
                            <tr style="background: #f5f5f5;">
                                <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">字段名称</th>
                                <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">必填/选填</th>
                                <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">类型</th>
                                <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">长度限制</th>
                                <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">输入规则</th>
                                <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">是否唯一</th>
                            </tr>
                            <tr>
                                <td style="padding: 8px; border: 1px solid #ddd;">user_id</td>
                                <td style="padding: 8px; border: 1px solid #ddd;">必填</td>
                                <td style="padding: 8px; border: 1px solid #ddd;">整数</td>
                                <td style="padding: 8px; border: 1px solid #ddd;">-</td>
                                <td style="padding: 8px; border: 1px solid #ddd;">逻辑外键，关联users.id</td>
                                <td style="padding: 8px; border: 1px solid #ddd;">是</td>
                            </tr>
                            <tr>
                                <td style="padding: 8px; border: 1px solid #ddd;">profile_visibility</td>
                                <td style="padding: 8px; border: 1px solid #ddd;">必填</td>
                                <td style="padding: 8px; border: 1px solid #ddd;">ENUM</td>
                                <td style="padding: 8px; border: 1px solid #ddd;">-</td>
                                <td style="padding: 8px; border: 1px solid #ddd;">public/friend/private</td>
                                <td style="padding: 8px; border: 1px solid #ddd;">否</td>
                            </tr>
                            <tr>
                                <td style="padding: 8px; border: 1px solid #ddd;">food_records_visibility</td>
                                <td style="padding: 8px; border: 1px solid #ddd;">必填</td>
                                <td style="padding: 8px; border: 1px solid #ddd;">ENUM</td>
                                <td style="padding: 8px; border: 1px solid #ddd;">-</td>
                                <td style="padding: 8px; border: 1px solid #ddd;">public/friend/private</td>
                                <td style="padding: 8px; border: 1px solid #ddd;">否</td>
                            </tr>
                            <tr>
                                <td style="padding: 8px; border: 1px solid #ddd;">updated_at</td>
                                <td style="padding: 8px; border: 1px solid #ddd;">必填</td>
                                <td style="padding: 8px; border: 1px solid #ddd;">TIMESTAMP</td>
                                <td style="padding: 8px; border: 1px solid #ddd;">-</td>
                                <td style="padding: 8px; border: 1px solid #ddd;">ON UPDATE CURRENT_TIMESTAMP</td>
                                <td style="padding: 8px; border: 1px solid #ddd;">否</td>
                            </tr>
                        </table>
                        <p style="color: #666; font-style: italic; margin-top: 10px;">* 移除user_id的物理外键约束，保留逻辑外键</p>
                        <p style="color: #666; font-style: italic; margin-left: 15px;">1. 用户注销时同步删除隐私设置</p>
                        <p style="color: #666; font-style: italic; margin-left: 15px;">2. 设置时校验用户是否存在</p>
                    </div>
                </div>

                <div class="requirement">
                    <div class="requirement-title">3. 用户偏好标签关联表 (user_preference_tags)</div>
                    <div class="requirement-desc">
                        <table style="width: 100%; border-collapse: collapse; margin-bottom: 16px;">
                            <tr style="background: #f5f5f5;">
                                <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">字段名称</th>
                                <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">必填/选填</th>
                                <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">类型</th>
                                <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">长度限制</th>
                                <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">输入规则</th>
                                <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">是否唯一</th>
                            </tr>
                            <tr>
                                <td style="padding: 8px; border: 1px solid #ddd;">user_id</td>
                                <td style="padding: 8px; border: 1px solid #ddd;">必填</td>
                                <td style="padding: 8px; border: 1px solid #ddd;">整数</td>
                                <td style="padding: 8px; border: 1px solid #ddd;">-</td>
                                <td style="padding: 8px; border: 1px solid #ddd;">逻辑外键，关联users.id</td>
                                <td style="padding: 8px; border: 1px solid #ddd;">联合主键</td>
                            </tr>
                            <tr>
                                <td style="padding: 8px; border: 1px solid #ddd;">tag_id</td>
                                <td style="padding: 8px; border: 1px solid #ddd;">必填</td>
                                <td style="padding: 8px; border: 1px solid #ddd;">整数</td>
                                <td style="padding: 8px; border: 1px solid #ddd;">-</td>
                                <td style="padding: 8px; border: 1px solid #ddd;">逻辑外键，关联tags.id</td>
                                <td style="padding: 8px; border: 1px solid #ddd;">联合主键</td>
                            </tr>
                            <tr>
                                <td style="padding: 8px; border: 1px solid #ddd;">preference_level</td>
                                <td style="padding: 8px; border: 1px solid #ddd;">必填</td>
                                <td style="padding: 8px; border: 1px solid #ddd;">整数</td>
                                <td style="padding: 8px; border: 1px solid #ddd;">1-5</td>
                                <td style="padding: 8px; border: 1px solid #ddd;">偏好程度（1-5分）</td>
                                <td style="padding: 8px; border: 1px solid #ddd;">否</td>
                            </tr>
                        </table>
                        <p style="color: #666; font-style: italic; margin-top: 10px;">* 移除物理外键约束，在应用层实现以下逻辑：</p>
                        <p style="color: #666; font-style: italic; margin-left: 15px;">1. 关联时校验user_id和tag_id是否存在</p>
                        <p style="color: #666; font-style: italic; margin-left: 15px;">2. 用户注销或标签删除时，同步删除对应的关联记录</p>
                        <p style="color: #666; font-style: italic; margin-left: 15px;">3. 保留联合主键防止重复关联</p>
                    </div>
                </div>

                <div class="requirement">
                    <div class="requirement-title">4. 用户统计数据视图 (user_stats)</div>
                    <div class="requirement-desc">
                        <p>用户统计数据采用视图动态计算，而非独立表存储冗余数据</p>
                        <p style="margin-top: 10px;">视图字段说明：</p>
                        <table style="width: 100%; border-collapse: collapse; margin-bottom: 16px;">
                            <tr style="background: #f5f5f5;">
                                <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">字段名称</th>
                                <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">类型</th>
                                <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">描述</th>
                            </tr>
                            <tr>
                                <td style="padding: 8px; border: 1px solid #ddd;">user_id</td>
                                <td style="padding: 8px; border: 1px solid #ddd;">整数</td>
                                <td style="padding: 8px; border: 1px solid #ddd;">用户ID</td>
                            </tr>
                            <tr>
                                <td style="padding: 8px; border: 1px solid #ddd;">total_posts</td>
                                <td style="padding: 8px; border: 1px solid #ddd;">整数</td>
                                <td style="padding: 8px; border: 1px solid #ddd;">用户发布的帖子总数</td>
                            </tr>
                            <tr>
                                <td style="padding: 8px; border: 1px solid #ddd;">total_food_records</td>
                                <td style="padding: 8px; border: 1px solid #ddd;">整数</td>
                                <td style="padding: 8px; border: 1px solid #ddd;">用户记录的食品总数</td>
                            </tr>
                            <tr>
                                <td style="padding: 8px; border: 1px solid #ddd;">followers_count</td>
                                <td style="padding: 8px; border: 1px solid #ddd;">整数</td>
                                <td style="padding: 8px; border: 1px solid #ddd;">用户的粉丝数量</td>
                            </tr>
                        </table>
                        <p>注意：视图不存储实际数据，每次查询时动态计算，避免数据不一致问题</p>
                    </div>
                </div>

                <div class="requirement">
                    <div class="requirement-title">5. 表关系图</div>
                    <div class="requirement-desc">
                        <p>用户相关表与其他表的关系:</p>
                        <ul>
                            <li><strong>users表与food_records表</strong>: food_records表中的user_id字段关联users表的主键</li>
                            <li><strong>users表与posts表</strong>: posts表中的user_id字段关联users表的主键</li>
                            <li><strong>users表与user_relations表</strong>: user_relations表中的follower_id和following_id字段都关联users表的主键</li>
                            <li><strong>users表与likes表</strong>: likes表中的user_id字段关联users表的主键</li>
                            <li><strong>users表与comments表</strong>: comments表中的user_id字段关联users表的主键</li>
                            <li><strong>users表与user_statistics表</strong>: 一对一关系，通过user_id关联</li>
                        </ul>
                    </div>
                </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html> 
